<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <!-- 树形组件 -->
        <el-tree
          icon-class="el-icon-folder-add"
          :data="depts"
          :props="defaultProps"
          :default-expand-all="false"
          :expand-on-click-node="false"
          style="width: 180px; text-align: center"
          @node-click="hClick"
        />
      </div>
      <!-- 右侧结构树对应的内容 -->
      <div class="log-list-right">
        <!-- 机构信息 -->
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <el-form
            ref="form"
            label-position="right"
            label-width="120px"
            style="width: 90%; text-align: center"
            class="form-bottom"
          >
            <!-- 机构规模 -->
            <el-row>
              <!-- 机构编号 -->
              <el-col :span="8">
                <el-form-item label="机构编号">
                  <el-input disabled />
                </el-form-item>
              </el-col>
              <!-- 机构名称 -->
              <el-col :span="8">
                <el-form-item label="机构名称">
                  <el-input disabled />
                </el-form-item>
              </el-col>
              <!-- 机构类型 -->
              <el-col :span="8">
                <el-form-item label="机构类型" disabled>
                  <el-select v-model="value" disabled placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 省市区三级联动 -->
            <el-row>
              <!-- 地址 -->
              <el-col :span="24">
                <el-form-item label="机构地址">
                  <el-row :gutter="24" style="margin: 0">
                    <!-- 省级 -->
                    <el-col :span="8" style="padding: 0">
                      <el-select v-model="value" :disabled="openDisabled" placeholder="请选择省">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-col>
                    <!-- 市级 -->
                    <el-col :span="8" style="padding: 0">
                      <el-select v-model="value" :disabled="openDisabled" placeholder="请选择市">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-col>
                    <!-- 县/区 -->
                    <el-col :span="8" style="padding: 0">
                      <el-select v-model="value" :disabled="openDisabled" placeholder="请选择县/区">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-col>

                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 机构详情 -->
            <el-row>

              <el-col :span="8">
                <el-form-item label="详细地址">
                  <el-input :disabled="openDisabled" placeholder="详细地址" />
                </el-form-item>
              </el-col>
              <!-- 经度 -->
              <el-col :span="8">
                <el-form-item label="经度">
                  <el-input disabled maxlength="20">
                    <span id="spanstyle" slot="suffix">E</span>
                  </el-input>
                </el-form-item>
              </el-col>

              <!-- 维度 -->
              <el-col :span="8">
                <el-form-item label="维度">
                  <el-input disabled maxlength="20">
                    <span id="spanstyle" slot="suffix">N</span>
                  </el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-button round type="warning" @click="add">编辑</el-button>

          </el-form>
        </el-card>

        <!-- 员工列表 -->
        <el-card class="box-card flex-item ">
          <div slot="header" class="clearfix">
            <span>员工信息</span>
          </div>
          <el-empty v-if="showEmpty" description="空空如也" />
          <!-- 表格组件 -->
          <template v-else>
            <el-table :data="list">
              <el-table-column type="index" :index="indexMethod" prop="id" align="center" label="序号" />
              <el-table-column prop="userId" width="150px" label="员工编号" />
              <el-table-column prop="name" width="100px" label="员工姓名" />
              <el-table-column prop="mobile" width="120px" label="手机号" />
              <el-table-column prop="agency.name" width="120px" label="所属机构" />
              <el-table-column prop="account" label="系统账号" />
              <el-table-column prop="stationName" label="系统角色" width="120px" />
              <el-table-column label="账号状态" width="120px">
                <template slot-scope="{row}">
                  {{ row.status === 1 ? "正常" : "异常" }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row style="height: 60px" align="middle" type="flex" justify="end">
              <el-pagination
                background
                :total="total"
                layout="sizes,prev, pager, next ,jumper"
                :page-sizes="[5 , 10, 20, 30, 40]"
                :page-size="params.pageSize"
                :current-page="params.page"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              />
            </el-row>
          </template>

        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserpage } from '@/api/bench'
import { gettree } from '@/api/bench'
// import { arr2tree } from '@/utils/index'
export default {
  name: 'Employee',
  data() {
    return {
      showEmpty: true,
      total: 500,
      openDisabled: true,
      value: '',
      list: [],
      depts: [{
        name: '一级 1',
        children: [{
          id: 5,
          name: '二级 1-1'
        }]
      },
      {
        name: '一级 1',
        children: [{
          id: 5,
          name: '二级 1-1'
        }]
      }], // 组织数据
      defaultProps: {
        label: 'name',
        children: 'children'
      },

      params: {
        page: 1,
        pageSize: 5
      },
      options: []
    }
  },
  created() {
    this.upTree()
  },
  methods: {
    // 控制分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pageSize = val
      this.updataTree()
    },
    handleCurrentChange(e) {
      this.params.page = e
      console.log(e, this.params.page)

      this.updataTree()
    },
    // 机构详情
    async hClick(node) {
      this.updataTree()
      console.log(node, node.name, node.id)
      // await getBusiness(node.id)
      this.showEmpty = false
      // const jsonString = JSON.parse(node.address)
      // console.log(jsonString)
    },
    // 获取树型结构
    async upTree() {
      const res = await gettree()
      // console.log(res)
      const jsonString = JSON.parse(res.data)
      // console.log(jsonString)
      this.depts = jsonString
    },
    // 控制按钮禁用
    async add() {
      this.openDisabled = !this.openDisabled

      // const res = await gettree()
      // console.log(res)
    },
    // 员工序号
    indexMethod(index) {
      return index + 1
    },
    // 员工分页数据
    async updataTree() {
      const res = await getUserpage(this.params)
      this.total = +res.data.counts
      this.list = res.data.items
      // console.log(res)
    }
    // 获取机构信息

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}
 #spanstyle{
      color: #20232a;
      font-weight: 400;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      margin-right: 14px;
      line-height: 40px;
  }

</style>
